<template>
  <!-- <van-share-sheet
    v-model:show="show"
    title="立即分享给好友"
    :options="options"
  /> -->
  <van-popup v-model:show="show" position="bottom" class="s-background">
    <div class="s-background">
      <div class="g-header s-background">分享给好友</div>
      <div class="m-sharebox g-flex">
        <div v-for="(item, index) in shareList" :key="index" class="shareitem g-flex g-warp g-c" @click="fnShare">
          <img :src="item.src" style="width: 48px; height: 48px" alt="" />
          <div class="f-s item-title">{{ item.title }}</div>
        </div>
      </div>
      <div class="m-division"></div>
      <div class="m-bottom">
        <van-button type="default" class="u-button2" @click="show = false">取消</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { Toast } from 'vant'
export default {
  name: 'Share',
  setup() {
    // const options = [
    //   [
    //     { name: '微信', icon: 'wechat' },
    //     { name: '朋友圈', icon: 'wechat-moments' },
    //     { name: '微博', icon: 'weibo' },
    //     { name: 'QQ', icon: 'qq' },
    //     { name: '小程序码', icon: 'weapp-qrcode' },
    //   ]
    // ]
    const state = reactive({
      show: false,
      shareList: [
        { src: require('@/assets/image/icon_weixin.png'), title: '微信好友' },
        { src: require('@/assets/image/pyq.png'), title: '朋友圈' },
        { src: require('@/assets/image/QQ.png'), title: 'QQ好友' },
        { src: require('@/assets/image/wb.png'), title: '微博' },
        { src: require('@/assets/image/link.png'), title: '复制链接' }
      ]
    })

    const open = () => (state.show = true)
    function fnShare() {
      let name = window.location.href
      var oInput = document.createElement('input')
      oInput.value = name
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      Toast('网址复制成功啦，快去分享把~')
      state.show = false
    }
    return {
      ...toRefs(state),
      open,
      fnShare
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  background-color: #121212 !important;
}
.s-background {
  background-color: #121212;
  color: #e7e8ea;
  font-size: 14px;
}
.m-division {
  height: 8px;
  background: #020003;
  margin-top: 24px;
}
.m-bottom {
  .u-button2 {
    width: 100%;
    height: 50px;
    border: none;
    background: #121212;
    color: #e7e8ea;
  }
}
.m-sharebox {
  margin-top: 16px;
  overflow-x: auto;
  overflow-x: auto;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  .shareitem {
    margin: 0 20px;
    .item-title {
      font-size: 12px;
      color: #747880;
      margin-top: 8px;
    }
  }
}
.m-sharebox::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.g-header {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 1px solid #2b2d2f;
}
.f-s {
  flex-shrink: 0;
}
.g-flex {
  display: flex;
}
.g-warp {
  flex-wrap: wrap;
}
.g-c {
  justify-content: center;
}
.g-f-d-r {
  direction: row;
}
.g-f-d-c {
  direction: column;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-tc {
  text-align: center;
}
.g-m-t-10 {
  margin-top: 10px;
}
.tendency-img {
  font-size: 30px;
}
.actived {
  color: pink;
}
</style>
